<script setup>
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue"

const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties //vue3获取当前this

// 组件中使用，接收传参的
let propsData = defineProps({
  show: {
    type: Boolean,
    required: true
  },
  title: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '30%'
  },
  footerShow: {
    type: Boolean,
    default: true
  },
})

let emits = defineEmits('submit', 'close');

let onSubmit = () => {
  emits('submit')
}
let onClose = () => {
  emits('close')
}

</script>
<template>
  <el-dialog
    v-model="show"
    draggable
    :title="title"
    :width="width"
    :before-close="onClose"
  >
    <slot></slot>
    <template #footer v-if="footerShow">
      <span class="dialog-footer">
        <el-button @click="onClose">Cancel</el-button>
        <el-button type="primary" @click="onSubmit">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style scoped lang="less">
.dialog-footer{
  display: flex;
  justify-content: center;
}
</style>